<template>
  <el-dialog
    title="请选择位置信息"
    :visible.sync="mapVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeBox">

    <div class="coordinateMap">
        <div id="map" class="map"></div>

        <div class="coordinateMap_input">
          <el-input v-model="lng" placeholder="点击地图或输入经度" @change="lnglatChange"></el-input>
          <div style="width:50px"></div>
          <el-input v-model="lat" placeholder="点击地图或输入纬度" @change="lnglatChange"></el-input>
          <div style="width:50px"></div>
          <el-input v-model="adr" placeholder="点击地图位置" @change="lnglatChange"></el-input>
        </div>

        <div>
          <el-button type="primary" @click="cancel()">取消</el-button>
          <el-button type="primary" @click="sure()">确定</el-button>
        </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  computed: {
  
  },
  data() {
    return {
      formLabelWidth: "120px",
      mapVisible: true,

      marker: null,
      lng: '',
      lat: '',
      adr: '',

    };
  },
  created() {
  },
  mounted() {
    this.initMap()
  },
  methods: {
    closeBox() {
      this.mapVisible = false;
      this.$ge.$emit("map-close-finish");
      this.$emit("getLnglat", null);
    },
    cancel() {
      this.mapVisible = false;
    },
    initMap() {
      if(!this.$map) {
        this.$nextTick(() => { 
          this.$map = new AMap.Map('map', {
            zoom: 9, //初始化地图层级
            center: [104.193637,30.561151] //初始化地图中心点
          });
          this.$map.on('click', (e) => {
            this.lng = e.lnglat.getLng()
            this.lat = e.lnglat.getLat()
            AMap.plugin('AMap.Geocoder', () => {
              var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: '成都'
              })
              var lnglat = [this.lng, this.lat]
              var that = this;
              geocoder.getAddress(lnglat, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // result为对应的地理位置详细信息
                    that.adr = result.regeocode.formattedAddress;
                }
              })
            });
            this.addMarker()
          })
        });
        
      }
    },
    lnglatChange() {
      this.addMarker()
      this.$map.setFitView();
    },
    addMarker(){
       if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(this.lng, this.lat)
      });
     
      this.$map.add(this.marker);
    },
    sure() {
      if(!this.lng || !this.lat || !this.adr) {
        this.$message.error("请选择位置")
        return;
      }
      let lnglat = {};
      lnglat.lng = Number(this.lng);
      lnglat.lat = Number(this.lat);
      lnglat.adr = this.adr;
      this.$emit("getLnglat", lnglat);
      this.cancel();
    }

  },
};
</script>

<style lang="scss">
.coordinateMap {
  width: 500px;
  .coordinateMap_input {
    display: flex;
    margin-bottom: 15px;
  } 
  .map {
    width: 500px;
    height: 300px;
    z-index: 2200;
    border-radius:6px;
  }
}
</style>
